<!--大小发起汇兑页面-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="业务类型" label-width="80px" prop="type">
            <el-select v-model="form.type" placeholder="请选择业务类型" @change="chooseType(form.type)">
              <el-option label="跨境支付" value="0"></el-option>
              <el-option label="退汇" value="1"></el-option>
              <el-option label="再贴现" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="交易流水号" label-width="80px" prop="bepsId">
            <el-input placeholder="请输入交易流水号" v-model="form.bepsId" />
          </el-form-item>
        </el-col>

        <el-col :span="7">
          <el-form-item label="收款人账号" label-width="80px" prop="colleNo">
            <el-input placeholder="请输入收款人账号" v-model="form.colleNo" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="收款人名称" label-width="80px" prop="colleName">
            <el-input placeholder="请输入收款人名称" v-model="form.colleName" />
          </el-form-item>
        </el-col>

        <el-col :span="9">
          <el-form-item label="工作日期" label-width="80px" prop="workDate">
            <el-date-picker
              v-model="form.workDate"
              type="daterange"
              style="width: 100%"
              range-separator="-"
              value-format="yyyyMMdd"
              start-placeholder="请输入工作开始日期"
              end-placeholder="请输入工作结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="业务状态" label-width="80px" prop="businessStatus">
            <el-select collapse-tags v-model="form.businessStatus" multiple placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="交易类别" label-width="80px" prop="businessType">
            <el-select v-model="form.businessType" placeholder="请选择交易类别">
              <el-option label="退汇" value="4"></el-option>
              <el-option label="商业汇票" value="5"></el-option>
              <el-option label="跨境业务" value="6"></el-option>
              <el-option label="金融机构" value="7"></el-option>
              <el-option label="异常" value="8"></el-option>
              <el-option label="HotScan检查异常" value="9"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="金额区间" label-width="80px" style="height: 10px">
            <el-row>
              <el-col :span="10">
                <el-form-item prop="miniMoney">
                  <el-input placeholder="最小金额" v-model="form.miniMoney" />
                </el-form-item>
              </el-col>
              <el-col :span="1" style="margin-left: 5px">-</el-col>
              <el-col :span="10">
                <el-form-item prop="maxMoney">
                  <el-input placeholder="最大金额" v-model="form.maxMoney" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search(form)">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8" style="height: 28px">
          <el-form-item>
            <el-button type="primary" @click="addTrans">新增交易</el-button>
            <el-button type="primary" @click="addTemplate">使用模板新增交易</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="22" class="menu-tree">
          <svg-icon icon-class="down_circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle" className="menu-tool-btn" />
          <svg-icon icon-class="search-circle_1" className="menu-tool-btn" />
          <svg-icon icon-class="menu-circle" className="menu-tool-btn" />
        </el-col>
      </el-row>

      <el-table :data="tableData" style="width: 100%; margin-top: 0px" height="400px">
        <el-table-column prop="type" label="类型" sortable width="150"></el-table-column>
        <el-table-column prop="transNo" label="交易流水号" sortable width="250"></el-table-column>
        <el-table-column prop="colleNo" label="收款人账号" sortable width="250"></el-table-column>
        <el-table-column prop="colleName" label="收款人名称" sortable width="250"></el-table-column>
        <el-table-column prop="workDate" label="工作日期" sortable width="250"></el-table-column>
        <el-table-column prop="businessType" label="交易类别" sortable width="150"></el-table-column>
        <el-table-column prop="moneyRange" label="金额" sortable width="250"></el-table-column>
        <el-table-column prop="sysNO" label="系统编号" sortable width="250"></el-table-column>
        <el-table-column prop="accDate" label="处理时间" sortable width="250"></el-table-column>
        <el-table-column prop="accType" label="处理状态" sortable width="150"></el-table-column>
        <el-table-column
          fixed="right"
          class="table-header-cell"
          prop="businessStatus"
          label="业务状态"
          width="80"
        ></el-table-column>
        <el-table-column
          fixed="right"
          class="table-header-cell"
          prop="communicationStatus"
          label="通讯状态"
          width="80"
        ></el-table-column>
        <el-table-column
          fixed="right"
          class="table-header-cell"
          prop="bankStatus"
          label="人行状态"
          width="80"
        ></el-table-column>
        <el-table-column fixed="right" class="table-header-cell" label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click.native.prevent="detailRow(scope.$index, tableData)" type="text" size="small">
              明细
            </el-button>
            <el-button
              v-if="scope.row.businessStatus == '复核拒绝' || scope.row.businessStatus == '授权拒绝'"
              @click.native.prevent="modTrans(scope.$index, tableData)"
              type="text"
              size="small"
            >
              修改
            </el-button>

            <el-button
              v-if="scope.row.businessStatus == '已录入'"
              @click="dialogRemoveVisible = true"
              type="text"
              size="small"
            >
              撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="10"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="20"
        ></el-pagination>
      </div>
    </el-form>

    <el-dialog
      title="大额客户发起汇兑明细"
      :visible.sync="dialogVisible"
      width="1024px"
      center
      :before-close="handleClose"
    >
      <el-form :model="formData" label-width="120px">
        <!-- 交易基础信息 -->
        <el-card class="form-card txnInfo-card">
          <div slot="header" class="label-header-msg">
            <span>{{ this.titles.basicInfo }}</span>
          </div>

          <el-row>
            <el-col :span="8">
              <el-form-item label="交易流水号" prop="transId">
                <el-input v-model="formData.transId" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报文标识号" prop="messIdentNum">
                <el-input v-model="formData.messIdentNum" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行内流水号" prop="InlineSerialNum">
                <el-input v-model="formData.InlineSerialNum" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="CPG日期" prop="cgpDate">
                <el-date-picker
                  v-model="formData.cgpDate"
                  type="date"
                  value-format="yyyyMMdd"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作日期" prop="workDate">
                <el-date-picker
                  v-model="formData.workDate"
                  type="date"
                  value-format="yyyyMMdd"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="清算日期" prop="liquidationDate">
                <el-date-picker
                  v-model="formData.liquidationDate"
                  type="date"
                  value-format="yyyyMMdd"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="业务类型" prop="businessType">
                <el-select v-model="formData.businessType" disabled>
                  <el-option label="A201-支票" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务种类" prop="businessKind">
                <el-select v-model="formData.businessKind" disabled>
                  <el-option label="03401" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务优先级" prop="bizPriority">
                <el-select v-model="formData.bizPriority" disabled>
                  <el-option label="NORM-普通" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="交易渠道" prop="transChannel">
                <el-select v-model="formData.transChannel" disabled>
                  <el-option label="1-CPG柜面" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="记账标志" prop="accountingMark">
                <el-select v-model="formData.accountingMark" disabled>
                  <el-option label="0-不记账" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账户类型" prop="accountType">
                <el-select v-model="formData.accountType" disabled>
                  <el-option label="I-对私" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="交易币种" prop="transCurrency">
                <el-input v-model="formData.transCurrency" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="原交易流水号" prop="OrigTransNum">
                <el-input v-model="formData.OrigTransNum" placeholder="原交易流水号" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="类别" prop="category">
                <el-select v-model="formData.category" placeholder="" disabled>
                  <el-option label="客户" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            
            <el-col :span="8">
              <el-form-item label="货物贸易交易" prop="goodsTradeTrans">
                <el-select v-model="formData.goodsTradeTrans" disabled>
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 付款人信息 -->
        <el-card class="form-card txnInfo-card">
          <div slot="header" class="label-header-msg">
            <span>{{ this.titles.payerInfo }}</span>
          </div>

          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="借方账号" prop="debitAccount">
                <el-input v-model="formData.debitAccount" placeholder="借方账号" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-form-item label="借方户名" prop="debitName">
              <el-input v-model="formData.debitName" placeholder="借方户名" disabled />
            </el-form-item>
          </el-row>

          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="付款人账号" prop="payerAccount">
                <el-input v-model="formData.payerAccount" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="付款人名称" prop="payerName">
                <el-input v-model="formData.payerName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="付款人地址" prop="payerAddress">
                <el-input v-model="formData.payerAddress" placeholder="付款人地址" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="付款行行号" prop="payerBankNo">
                <el-input v-model="formData.payerBankNo" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="付款行行名" prop="payerBankName">
                <el-input v-model="formData.payerBankName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="付款人开户行号" prop="payerOpenBankNum">
                <el-input v-model="formData.payerOpenBankNum" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="付款人开户行行名" prop="payerOpenBankName">
                <el-input v-model="formData.payerOpenBankName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 收款人信息 -->
        <el-card class="form-card txnInfo-card">
          <div slot="header" class="label-header-msg">
            <span>{{ this.titles.payeeInfo }}</span>
          </div>
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="收款人账号" prop="payeeAccount">
                <el-input v-model="formData.payeeAccount" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="收款人名称" prop="payeeName">
                <el-input v-model="formData.payeeName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="收款人地址" prop="payeeAddress">
                <el-input v-model="formData.payeeAddress" placeholder="收款人地址" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="收款行行号" prop="payeeBankNo">
                <el-input v-model="formData.payeeBankNo" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="收款行行名" prop="payeeBankName">
                <el-input v-model="formData.payeeBankName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="收款人开户行号" prop="payeeOpenBankNum">
                <el-input v-model="formData.payeeOpenBankNum" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="收款人开户行行名" prop="payeeOpenBankName">
                <el-input v-model="formData.payeeOpenBankName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 其他交易信息 -->
        <el-card class="form-card txnInfo-card">
          <div slot="header" class="label-header-msg">
            <span>{{ this.titles.otherInfo }}</span>
          </div>
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="交易金额" prop="transMoney">
                <el-input v-model="formData.transMoney" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="大写金额" prop="BigMoney" style="color: red; font-weight: 700">
                {{ formData.BigMoney }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手续费金额" prop="chargeMoney">
                <el-input v-model="formData.chargeMoney" placeholder="手续费金额" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="中介机构1" prop="interAgency1">
                <el-input v-model="formData.interAgency1" placeholder="中介机构1" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="中介机构1名称" prop="interAgencyName1">
                <el-input v-model="formData.interAgencyName1" placeholder="中介机构1名称" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="中介机构2" prop="interAgency2">
                <el-input v-model="formData.interAgency2" placeholder="中介机构2" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="中介机构2名称" prop="interAgencyName2">
                <el-input v-model="formData.interAgencyName2" placeholder="中介机构2名称" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input type="textarea" v-model="formData.remarks" placeholder="备注" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="附言" prop="postscript">
                <el-input type="textarea" v-model="formData.postscript" placeholder="附言" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 支票附加域信息 -->
        <el-card class="form-card txnInfo-card">
          <div slot="header" class="label-header-msg">
            <span>支票附加域信息</span>
          </div>
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="出票日期" prop="DrawDate">
                <el-date-picker
                  v-model="formData.DrawDate"
                  type="date"
                  value-format="yyyyMMdd"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="票据号码" prop="DrawNum">
                <el-input v-model="formData.DrawNum" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出票人名称" prop="DrawName">
                <el-input v-model="formData.DrawName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="票据张数" prop="DrawCount">
                <el-input v-model="formData.DrawCount" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="票据金额" prop="DrawMoney">
                <el-input v-model="formData.DrawMoney" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="牌价" prop="listPrice">
                <el-input v-model="formData.listPrice" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <!-- 行内信息 -->
        <el-card class="form-card payerInfo-card">
          <div slot="header" class="label-header-msg">
            <span>行内信息</span>
          </div>
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="业务状态" prop="businessStatus">
                <el-select v-model="formData.businessStatus" disabled placeholder="请选择业务状态">
                  <el-option label="03-已审核" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="通讯状态" prop="communiStatus">
                <el-select v-model="formData.communiStatus" disabled placeholder="请选择业务类型">
                  <el-option label="02-已发送" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="中心状态" prop="centerStatus">
                <el-select v-model="formData.centerStatus" disabled placeholder="请选择业务类型">
                  <el-option label="PR04-已清算" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="业务处理码" prop="ServProcessCode">
                <el-input v-model="formData.ServProcessCode" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="业务拒绝信息" prop="bizRejectInfo">
                <el-input v-model="formData.bizRejectInfo" placeholder="业务拒绝信息" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="non-stp类型" prop="nonStpType">
                <el-select v-model="formData.nonStpType" disabled placeholder="non-stp类型">
                  <el-option label="" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="non-STP原因" prop="nonStpReason">
                <el-input v-model="formData.nonStpReason" placeholder="non-STP原因" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="录入操作员" prop="entryOperator">
                <el-input v-model="formData.entryOperator" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="录入时间" prop="entryTime">
                <el-date-picker
                  v-model="formData.entryTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行内状态" prop="BankStatus">
                <el-select v-model="formData.BankStatus" disabled placeholder="请选择">
                  <el-option label="" value=""></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="复核操作员" prop="checkOperator">
                <el-input v-model="formData.checkOperator" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="复核时间" prop="checkTime">
                <el-date-picker
                  v-model="formData.checkTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="记账状态" prop="chargeStatus">
                <el-select v-model="formData.chargeStatus" disabled placeholder="请选择">
                  <el-option label="" value=""></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="审核操作员" prop="examiner">
                <el-input v-model="formData.examiner" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间" prop="examineTime">
                <el-date-picker
                  v-model="formData.examineTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder=""
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="授权操作员" prop="authOperator">
                <el-input v-model="formData.authOperator" placeholder="授权操作员" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="授权时间" prop="authTime">
                <el-date-picker
                  v-model="formData.authTime"
                  type="date"
                  value-format="yyyyMMdd"
                  placeholder="授权时间"
                  disabled
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="复核附言" prop="checkMemo">
                <el-input type="textarea" v-model="formData.checkMemo" placeholder="复核附言" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="审核附言" prop="examineMemo">
                <el-input type="textarea" v-model="formData.examineMemo" placeholder="审核附言" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex">
            <el-col :span="24">
              <el-form-item label="授权附言" prop="authMemo">
                <el-input type="textarea" v-model="formData.authMemo" placeholder="授权附言" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- 退汇原因 -->
        <el-card v-if="backVisible" class="form-card txnInfo-card">
          <div slot="header" class="label-header-msg">附加数据域</div>

          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="原报文标识号" prop="identiNo">
                <el-input v-model="formData.identiNo" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原报文类型代码" prop="identiTypeCode">
                <el-input v-model="formData.identiTypeCode" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="原发起机构" prop="initiator">
                <el-input v-model="formData.initiator" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原发起机构名称" prop="initiatorName">
                <el-input v-model="formData.initiatorName" placeholder="" disabled />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-form-item label="退汇原因" prop="reexchReason">
              <el-input type="textarea" v-model="formData.reexchReason" disabled placeholder="退汇原因" />
            </el-form-item>
          </el-row>
        </el-card>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">关闭</el-button>
      </span>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogRemoveVisible" width="30%" :before-close="handleClose">
      <span>确认撤回？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRemoveVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogRemoveVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <add-trans-dialog ref="addTransDialog"></add-trans-dialog>
    <mod-trans-dialog ref="modTransDialog"></mod-trans-dialog>
    <import-template-dialog ref="importTemplateDialog" @choose="importTemplateSearch"></import-template-dialog>
  </div>
</template>
<script>
import addTransDialog from "./components/addTrans";
import modTransDialog from "./components/modTrans";
import importTemplateDialog from "@/views/cnaps/components/importTemplate";
export default {
  name: "HvpsBackExch",
  components: {
    addTransDialog,
    modTransDialog,
    importTemplateDialog,
  },
  data() {
    return {
      currentPage4: 1, // 分页
      dialogVisible: false,
      isLoading: false,
      dialogRemoveVisible: false,

      backVisible: false, // 业务类型选择退汇时显示

      titles: {
        basicInfo: "交易基础信息", // 交易基础信息
        payerInfo: "付款人信息", // 付款人信息
        payeeInfo: "收款人信息", // 收款人信息
        otherInfo: "其他信息", // 其他信息
      },

      //businessValue: ['1', '2'],
      options: [
        {
          value: "1",
          label: "已录入",
        },
        {
          value: "2",
          label: "复核拒绝",
        },
        {
          value: "3",
          label: "授权拒绝",
        },
      ],

      form: {
        bepsId: "", // 交易流水号
        cpgDate: "", // CPG日期
        nonStp: "", // non-STP原因
        workDate: "", // 工作日期
        resource: "1", // 选项
        trabsDate: "", // 交易起息日期
        type: "0", // 类型
        colleNo: "", // 收款人账号
        colleName: "", // 收款人名称
        businessType: "", // 交易类别
        miniMoney: "", // 起始金额
        maxMoney: "", // 结束金额
        bankStatus: "", // 人行状态
        businessStatus: ["2", "3"],
      },

      tableData: [
        {
          type: "退汇", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accType: "待处理", // 处理状态
          businessStatus: "复核拒绝", // 业务状态
          communicationStatus: "已发送", // 通讯状态
          bankStatus: "", // 人行状态
        },
        {
          type: "A201-支票", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accType: "待处理", // 处理状态
          businessStatus: "授权拒绝", // 业务状态
          communicationStatus: "已发送", // 通讯状态
          bankStatus: "", // 人行状态
        },
        {
          type: "A201-支票", // 类型
          transNo: "12345678901111", // 交易流水号
          colleNo: "4355656557854678", // 收款人账号
          colleName: "张三", // 收款人名称
          workDate: "2023-10-09", // 工作时间
          businessType: "退汇", // 交易类别
          moneyRange: "100,000", // 金额
          sysNO: "3124454565467", // 系统编号
          accDate: "2023-11-11", // 处理时间
          accType: "待处理", // 处理状态
          businessStatus: "已录入", // 业务状态
          communicationStatus: "已发送", // 通讯状态
          bankStatus: "", // 人行状态
        },
      ],

      formData: {
        // 交易基础信息
        transId: "HVPS2023111500577221", // 交易流水号
        messIdentNum: "2023110800123494", // 报文标识号
        InlineSerialNum: "5001", // 行内流水号
        cgpDate: "2023-11-15", // CPG日期
        workDate: "2023-11-08", // 工作日期
        liquidationDate: "2023-11-15", // 清算日期
        businessType: "A201-支票", // 业务类型
        businessKind: "03401", // 业务种类
        bizPriority: "NORM-普通", // 业务优先级
        transChannel: "1-CPG柜面", // 交易渠道
        accountingMark: "1", // 记账标志
        accountType: "I-对私", // 账户类型
        transCurrency: "CNY", // 交易币种
        OrigTransNum: "", // 原交易流水号
        category: "客户", // 类别

        // 付款人信息
        debitAccount: "14325463241321324", // 借方账号
        debitName: "张三", //借方户名
        payerAccount: "14325463241321324", // 付款人账号
        payerName: "张三", // 付款人名称
        payerAddress: "", // 付款人地址
        payerBankNo: "4675465674567", // 付款行行号
        payerBankName: "中国建设银行", // 付款行行名
        payerOpenBankNum: "14325463241321324", // 付款人开户行号
        payerOpenBankName: "中国建设银行", // 付款人开户行行名

        // 收款人信息
        payeeAccount: "14325463241321324", // 收款人账号
        payeeName: "张三", // 收款人名称
        payeeAddress: "", // 收款人地址
        payeeBankNo: "4675465674567", // 收款行行号
        payeeBankName: "中国建设银行", // 收款行行名
        payeeOpenBankNum: "14325463241321324", // 收款人开户行号
        payeeOpenBankName: "中国建设银行", // 收款人开户行行名

        // 其他交易信息
        transMoney: "77,778", // 交易金额
        BigMoney: "柒万柒仟柒佰柒拾捌元整", // 大写金额
        chargeMoney: "", // 手续费金额
        interAgency1: "", // 中介机构1
        interAgencyName1: "", // 中介机构1名称
        interAgency2: "", // 中介机构2
        interAgencyName2: "", // 中介机构2名称
        remarks: "", // 备注
        postscript: "", // 附言

        // 支票附加域信息
        DrawDate: "2023-11-15", // 出票日期
        DrawNum: "1223455245243", // 票据号码
        DrawName: "王五", // 出票人名称
        DrawCount: "12", // 票据张数
        DrawMoney: "1000,000,00", // 票据金额
        listPrice: "99,999,990", // 牌价

        // 行内信息
        businessStatus: "03-已审核", // 业务状态
        communiStatus: "02-已发送", // 通讯状态
        centerStatus: "PR04-已清算", // 中心状态
        ServProcessCode: "CB1I0000", // 业务处理码
        bizRejectInfo: "", // 业务拒绝信息
        nonStpType: "", // non-stp类型
        nonStpReason: "", // non-STP原因
        entryOperator: "韩一", // 录入操作员
        entryTime: "2023-11-15 02:29:42", // 录入时间
        BankStatus: "", // 行内状态
        checkOperator: "韩二", // 复核操作员
        checkTime: "2023-11-15 02:59:10", // 复核时间
        chargeStatus: "", // 记账状态
        examiner: "韩三", // 审核操作员
        examineTime: "2023-11-15 03:04:55", // 审核时间
        authOperator: "", // 授权操作员
        authTime: "", // 授权时间
        checkMemo: "", // 复核附言
        examineMemo: "", // 审核附言
        authMemo: "", // 授权附言

        // 附加数据域
        identiNo: "", //   原报文标识号
        initiator: "", //原发起机构
        initiatorName: "", //原发起机构名
        identiTypeCode: "", //原报文类型代码
        reexchReason: "", // 退汇原因

        // BOP信息
        payerIdentity: "1", // 付款人身份
        payerNature: "2", // 付款人性质
        goodsTradeTrans: "1", // 货物贸易交易
      },
    };
  },

  mounted() {},

  methods: {
    // 搜索
    search(data) {
      console.log(data, "data");
      console.log("搜索");
    },

    // 重置
    reset() {
      this.resetForm("form");
    },

    //类型下拉框
    chooseType(row) {
      console.log(row, "chooseType");
      if (row == "2") {
        this.form.workDate = ["20231109", "20231110"];
      } else {
        this.form.workDate = ["20231110", "20231110"];
      }
    },

    // 详情
    detailRow(index, rows) {
      console.log(index, "详情");
      console.log(rows[index], "详情");
      if (rows[index].type == "退汇") {
        console.log("退汇");
        this.titles.payerInfo = "付款人信息(原收款人信息)";
        this.titles.payeeInfo = "收款人信息(原付款人信息)";
        this.formData.identiNo = "132413546546234235";
        this.formData.initiator = "321524362436423";
        this.formData.initiatorName = "中国工商银行";
        this.formData.identiTypeCode = "234135643523453245756846";
        this.backVisible = true;
      } else {
        console.log("非退汇");
        this.titles.payerInfo = "付款人信息";
        this.titles.payeeInfo = "收款人信息";
        this.backVisible = false;
      }
      this.dialogVisible = true;
    },

    // 修改
    modRow(index, rows) {
      console.log("修改");
    },

    // 撤回
    removeRow(done) {
      console.log("撤回");
      this.$confirm("确认撤回？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    handleClose(done) {
      this.dialogVisible = false;
    },

    // 入客户账
    intoCuster() {
      console.log("入客户账");
      this.$confirm("特殊账户，确定入账吗?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "入账成功!",
          });
        })
        .catch(() => {
          console.log("取消入账");
        });
    },
    // 入BP
    intoBP() {
      console.log("入BP");
    },
    // 退汇/重汇
    reject() {
      console.log("退汇/重汇");
    },
    // 交其他部门
    otherBank() {
      console.log("交其他部门");
    },
    // 关闭
    close() {
      this.dialogVisible = false;
    },
    // 新增交易
    addTrans() {
      console.log("新增交易");
      console.log("this.$refs.addTransDialog", this.$refs.addTransDialog);
      this.$refs.addTransDialog.show();
    },

    // 修改
    modTrans() {
      console.log("修改");
      console.log("this.$refs.modTransDialog", this.$refs.modTransDialog);
      this.$refs.modTransDialog.show();
    },

    // 导入模板
    addTemplate() {
      console.log("导入模板");
      console.log("this.$refs.tTemplateDialog", this.$refs.importTemplateDialog);
      this.$refs.importTemplateDialog.show();
    },

    // 选择模板
    importTemplateSearch() {
      console.log("选择模板");
    },
  },
};
</script>
<style lang="scss">
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  //width: 100%;
  height: 5%;
  margin-top: -20px;
  // margin-left: 91%;
  font-size: 28px;
}

.block {
  float: right;
}

.table-header-cell {
  background-color: #e7e7e7 !important;
  font-size: 12px !important;
}

.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
  background-color: #e7e7e7;
  font-size: 12px;
  height: 40px;
}

.el-table .el-table__header-wrapper,
.el-table .el-table__fixed-header-wrapper {
  height: 40px;
}

.form-card {
  margin-bottom: 10px;
}
</style>
